<template>
    <div class="shows">
        <!--操作按钮-->
        <el-row class="optionBar">
            <el-button @click="addHandler" type="primary">添加</el-button>
        </el-row>
        <!--弹出框-->
        <el-dialog :title="handlerDialogTitle" @closed="handleClosed" :visible.sync="handlerDialog" :center="true"
                   :destroy-on-close="true" :modal="false">
            <el-form :model="formObj" label-width="80px" ref="dialogForm" :rules="addRules">
                <el-form-item label="上级" prop="parentId">
                    <el-input v-model="formObj.parentName" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="标题" prop="title">
                    <el-input v-model="formObj.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="级别" prop="level">
                    <el-input v-model="formObj.level" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input v-model="formObj.sort" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="VUE名称" prop="name">
                    <el-input v-model="formObj.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图标" prop="icon">
                    <el-input v-model="formObj.icon" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="hidden">
                    <el-switch v-model="formObj.hidden" active-text="显示" inactive-text="隐藏" :active-value="1"
                               :inactive-value="0"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="submitForm('dialogForm')" type="success">提交</el-button>
                <el-button @click="handlerDialog = false">取消</el-button>
            </div>
        </el-dialog>
        <el-row class="tableBar">
            <el-collapse accordion v-for="first in tableData" :key="first.id">
                <el-collapse-item>
                    <template slot="title">
                        <i :class="first.icon">{{ first.title }}</i>
                        <el-tag class="item-label" type="success" size="mini">{{ first.name }}</el-tag>
                        <el-link class="item-label" @click.stop="addChildrenHandle(first.id,first.title)"
                                 icon="el-icon-plus" :underline="false"
                                 type="primary">下级
                        </el-link>
                    </template>
                    <div class="second-item" v-for="second in first.children" :key="second.id">
                        <span class="item-icon">{{ second.sort }}</span>
                        <i :class="second.icon">{{ second.title }}</i>
                        <el-tag class="item-label" size="mini">{{ second.name }}</el-tag>

                        <span class="item-right">
                            <el-link icon="el-icon-edit" @click="updateHandler(second.id,first.title)" type="success">编辑</el-link>
                            <el-link icon="el-icon-delete" @click="deleteHandler(second.id,second.title)" type="danger">删除</el-link>
                        </span>

                    </div>
                </el-collapse-item>
            </el-collapse>
        </el-row>
        <!-- 分页bar -->
        <el-row class="pagingBar">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="queryObj.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-row>
    </div>
</template>

<script>
import {getUmsMenuOne, saveUmsMenu, updateUmsMenu, delUmsMenu, getUmsMenuPage} from '@/api/UmsMenu/'

export default {
  name: 'UmsAdmin',
  data () {
    return {
      timeRanger: null,
      queryObj: {
        current: 1,
        size: 10,
        startTime: null,
        endTime: null,
        title: null
      },
      formObj: {
        parentId: null,
        title: null,
        level: null,
        sort: null,
        name: null,
        icon: null,
        hidden: 1
      },
      addRules: {
        parentId: [
          {required: true, message: '请输入父级ID', trigger: 'blur'}
        ],
        title: [
          {required: true, message: '请输入菜单标题', trigger: 'blur'}
        ],
        level: [
          {required: true, message: '请输入菜单级别', trigger: 'blur'}
        ],
        sort: [
          {required: true, message: '请输入菜单排序', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入前端VUE 名称', trigger: 'blur'}
        ],
        icon: [
          {required: true, message: '请输入图标', trigger: 'blur'}
        ],
        hidden: [
          {required: true, message: '请输入是否隐藏 0隐藏 1展示', trigger: 'blur'}
        ]
      },
      total: 0,
      tableData: [],
      handlerDialog: false,
      handlerDialogTitle: '',
      handlerDialogSave: false,
      // 当前操作id
      rowId: null,
      handlerDialogDetail: false,
      detailObj: {
        id: null,
        parentId: null,
        parentName: null,
        title: null,
        level: null,
        sort: null,
        name: null,
        icon: null,
        hidden: null,
        createTime: null,
        status: null
      }
    }
  },
  created () {
    this.search()
  },
  watch: {
    // 监听时间变化
    timeRanger: function (newVal, Old) {
      if (newVal === null) {
        this.queryObj.startTime = null
        this.queryObj.endTime = null
      } else {
        this.queryObj.startTime = newVal[0]
        this.queryObj.endTime = newVal[1] + 86399000
      }
    }
  },
  methods: {
    page () {
      getUmsMenuPage(this.queryObj).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
      })
    },
    handleSizeChange (size) {
      this.queryObj.size = size
      this.queryObj.current = 1
      this.page()
    },
    handleCurrentChange (current) {
      this.queryObj.current = current
      this.page()
    },
    search () {
      this.queryObj.current = 1
      this.page()
    },
    addHandler () {
      this.handlerDialogTitle = '添加类型'
      this.handlerDialog = true
      this.handlerDialogSave = true

      this.formObj.parentId = 0
      this.formObj.parentName = '顶级'
    },
    addChildrenHandle (parentId, parentName) {
      this.handlerDialogTitle = '添加类型'
      this.handlerDialog = true
      this.handlerDialogSave = true
      this.formObj.parentId = parentId
      this.formObj.parentName = parentName
    },
    submitForm (formName) {
      if (this.handlerDialogSave) {
        this.saveForm(formName)
      } else {
        this.updateForm(formName)
      }
    },
    saveForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveUmsMenu(this.formObj).then(response => {
            // 提示信息
            this.message = ({
              message: '添加成功！',
              type: 'success'
            })
            // 关闭dialog
            this.handlerDialog = false
            // 清空对象信息
            Object.keys(this.formObj).forEach(key => {
              this.formObj[key] = null
            })
            // 刷新数据
            this.page()
          })
        } else {
          return false
        }
      })
    },
    updateForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateUmsMenu(this.formObj, this.rowId).then(response => {
            // 提示信息
            this.message = ({
              message: '修改成功！',
              type: 'success'
            })
            // 关闭dialog
            this.handlerDialog = false
            // 清空对象信息
            Object.keys(this.formObj).forEach(key => {
              this.formObj[key] = null
            })
            // 刷新数据
            this.page()
          })
        } else {
          return false
        }
      })
    },
    updateHandler (id, parentName) {
      this.rowId = id

      this.handlerDialogTitle = '修改类型'
      this.handlerDialog = true
      this.handlerDialogSave = false

      getUmsMenuOne(id).then(response => {
        this.formObj = response.data
        this.formObj.parentName = parentName
      })
    },
    deleteHandler (id, name) {
      this.$confirm('此操作将永久删除【' + name + '】,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delUmsMenu(id).then(response => {
          this.message = ({
            type: 'success',
            message: '删除成功!'
          })
          // 刷新数据
          this.page()
        })
      })
    },
    handleClosed () {
      Object.keys(this.formObj).forEach(key => {
        this.formObj[key] = null
      })
      this.fileList = []
    },
    handleDetailClosed () {
      Object.keys(this.detailObj).forEach(key => {
        this.detailObj[key] = null
      })
    },
    detailHandler (id) {
      getUmsMenuOne(id).then(response => {
        this.detailObj = response.data
        this.handlerDialogDetail = true
      })
    }
  }
}
</script>

<style scoped>

.second-item {
    padding: 10px 10px 10px 20px;
    border-bottom: 1px solid #dcdfe6;
}

.item-icon {
    margin-right: 5px;
}

.item-label {
    margin-left: 5px;
}

.item-right {
    float: right;
}

</style>
